<template>
  <div class="view-container">
    <div class="filter-container">
      <el-form
        :inline="true"
        :model="filterData"
        size="small"
        class="filter-form-inline"
      >
        <el-row
          :gutter="40"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="产品名称"
              style="width: 100%"
            >
              <el-select
                v-model="filterData.productId"
                style="width: 100%;"
                clearable
                filterable
                remote
                reserve-keyword
                :remote-method="proRemoteMethod"
                :loading="proLoading"
                value-key="id"
                placeholder="请选择产品"
                @change="refreshList"
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.id"
                  :label="getProductName(item)"
                  :value="item.id"
                >
                  <div class="pro-item">
                    <span>{{ getProductName(item) }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="配送商"
              style="width: 100%"
            >
              <el-input
                v-model="filterData.distributeName"
                clearable
                placeholder="输入配送商名称"
                @clear="refreshList"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="配送商地区"
              style="width: 100%"
            >
              <el-cascader
                ref="cascader"
                v-model="filterData.codeList"
                :popper-append-to-body="false"
                style="width: 100%;"
                :options="citys"
                placeholder="请选择配送地区"
                :props="{ checkStrictly: true, expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
                collapse-tags
                clearable
                @change="refreshList"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            style="min-width: 170px;"
          >
            <el-form-item style="width: 100%">
              <el-button
                class="border-btn"
                @click="resetFilter"
              >重置</el-button>
              <el-button
                type="primary"
                class="main-btn"
                @click="refreshList"
              >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      class="main-content"
      style="padding-top: 0px;"
    >
      <div class="list-container">
        <table-view
          header-cell-class-name="table-header"
          :data="listData"
          border
          :cell-style="cellStyle"
          :visible="isMore"
          @row-click="rowClick"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="distributeServeNo"
            label="服务编号"
            :width="140"
            show-overflow-tooltip
            header-align="center"
            align="center"
            fixed="left"
          />
          <el-table-column
            label="通用名"
            prop="productPopularName"
            :min-width="160"
            show-overflow-tooltip
            header-align="center"
            fixed="left"
          >
            <template #default="scope">
              <span>{{ scope.row.productPopularName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="商品名"
            prop="productName"
            :min-width="160"
            show-overflow-tooltip
            header-align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.productName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="packSpecs"
            label="包装规格"
            :min-width="120"
            show-overflow-tooltip
            header-align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.packSpecs }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="配送商名称"
            :min-width="140"
            show-overflow-tooltip
            header-align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.distributeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="region"
            label="配送地区"
            :min-width="160"
            show-overflow-tooltip
            header-align="center"
          >
            <template #default="scope">
              <div>
                <area-list-view :areas="scope.row.region" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="配送费"
            header-align="center"
            :min-width="120"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div
                class="distribute-price-container"
                style="line-height: 20px;"
              >
                <div
                  class="distribute-price-container"
                  style="display:flex;"
                >
                  <div
                    class="distributePrice"
                    style="width:100%;display:flex;align-items:center"
                  >
                    <div
                      v-if="scope.row.computeMode==='固定价格'"
                      class="text-line-1"
                    >
                      <span>{{ scope.row.distributePrice }}元</span><span> / {{ getLabel('sell_unit',scope.row.sellUnit) }}</span>
                    </div>
                    <div
                      v-if="scope.row.computeMode==='终端价百分比'"
                      class="text-line-1"
                    >
                      <span>{{ scope.row.distributePrice }}%</span><span>终端价</span>
                    </div>
                  </div>
                </div>
                <div
                  v-if="scope.row.processDefinitionKey==='setDistributeServeUpdatePriceCheck'"
                  class="distribute-price-status"
                >
                  <div
                    v-if="scope.row.flowStatus==='DOING'"
                    class="status flow-status-color"
                  >
                    [ 变更审核中 ]
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="expireTime"
            label="服务结束日期"
            :min-width="130"
            show-overflow-tooltip
            header-align="center"
            align="center"
            sortable
          >
            <template #default="scope">
              <span>{{ dateFormat('yyyy-mm-dd', scope.row.expireTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            :min-width="140"
            show-overflow-tooltip
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <span>{{ dateFormat('yyyy-mm-dd HH:MM', scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="disStatus"
            label="状态"
            :min-width="120"
            show-overflow-tooltip
            header-align="center"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <div
                class="status-contain"
                style="line-height: 20px"
              >
                <div class="status">{{ getLabel('distribute_server_status',scope.row.disStatus) }}</div>
                <div
                  v-if="scope.row.disStatus === '2'"
                  class="flow-status"
                >
                  <div
                    v-if="scope.row.processDefinitionKey==='setDistributeServeAssociationCheck'&&scope.row.flowStatus==='DOING'"
                    class="terminal-audit flow-status-color"
                  >
                    [ 配送服务关联终端审核中 ]
                  </div>
                  <div
                    v-if="scope.row.processDefinitionKey==='setDistributeServeInvalidateCheck'&&scope.row.flowStatus==='DOING'"
                    class="flow-status-color"
                  >[ 作废审核中 ]</div>
                  <div
                    v-else-if="scope.row.isDistributeTerminal"
                    class="flow-status-color"
                  >[ 无配送终端 ]</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="filterData.page"
          v-model:limit="filterData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 配送服务详情 -->
    <detail-drawer
      ref="detailDrawer"
      custom-title
    >
      <template #title>
        <div
          class="draw-title"
          style="display:flex;justify-content:space-between;"
        >
          <div class="title-left">
            <span>配送服务详情 - {{ rowData?.distributeServeNo }}</span>
            <service-status
              style="margin-left:4px"
              :datas="rowData"
            />
          </div>
        </div>
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <distributor-service-info :id="rowData?.id" />
          </div>
          <div class="history-list">
            <item-title title="操作记录" />
            <operation-view
              :id="rowData?.id"
              mode="distribute_serve"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {useRouter} from 'vue-router'
import area from '@/utils/area.js'

export default defineComponent({
  components: {
    distributorServiceInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/distributor/distributorServiceInfo.vue'
      )
    ),
    serviceStatus: defineAsyncComponent(() =>
      import('@CRM/views/distributorManagement/modules/serviceStatus.vue')
    ),
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    var total = ref(0)
    var reactiveData = reactive({
      citys: area,
      filterData: {
        disStatus: '2',
        productId: undefined,
        distributeName: '',
        codeList: [],
        sort: '', // desc asc
        page: 1,
        pageSize: 20,
      },
      listData: [],
      proLoading: false,
      productOptions: [],
      detailDrawer: null,
      rowData: null,
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作') return
      reactiveData.rowData = row
      reactiveData.detailDrawer.open()
    }
    const sortChange = (column) => {
      console.log(column)
      if (column.prop === 'expireTime') {
        if (column.order === 'ascending') {
          reactiveData.filterData.sort = 'asc'
        } else if (column.order === 'descending') {
          reactiveData.filterData.sort = 'desc'
        }
      }
      refreshList()
    }
    const proRemoteMethod = async(query) => {
      if (query !== '') {
        reactiveData.proLoading = true
        var pro = await api.common.GET_PRODUCT_LIST({ keyWord: query })
        if (pro.code === 0) {
          reactiveData.productOptions = pro.data.list
        } else {
          reactiveData.productOptions = []
        }
        reactiveData.proLoading = false
      } else {
        reactiveData.productOptions = []
      }
    }
    const getList = (row) => {
      api.distributors
        .DISTRIBUTORS_SERVICE_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list || []
            total.value = res.data.total
          }
        })
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        disStatus: '2',
        productId: undefined,
        distributeName: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        page: 1,
        pageSize: 20,
      }
      getList()
    }

    // 更新列表
    const refreshList = () => {
      reactiveData.filterData.page = 1
      getList()
    }

    onMounted(() => {
      getList()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      refreshList,
      resetFilter,
      proRemoteMethod,
      sortChange,
    }
  },
})
</script>

